<!-- 车辆管理 -->
<template>
  <div class="dashboard-container driver customer-list-box">
    <!-- 搜索区域 -->
    <el-card
      shadow="never"
    >
      <el-form
        :model="form"
        label-width="100px"
      >
        <el-row
          style="width: 100%;"
          align="middle"
        >
          <el-col :span="8"><el-form-item label="司机账号:">
            <el-input
              v-model="form.account"
              placeholder="请输入司机账号"
            ></el-input>
          </el-form-item></el-col>
          <el-col :span="8"> <el-form-item label="司机姓名:">
            <el-input
              v-model="form.name"
              placeholder="请输入司机姓名"
            ></el-input>
          </el-form-item></el-col>
          <el-col :span="8"> <el-form-item label="司机手机号:">
            <el-input
              v-model="form.phone"
              placeholder="请输入司机手机号"
            ></el-input>
          </el-form-item></el-col>
          <el-col :span="8">
            <el-form-item
              label="所属机构:"
              style="width: 350px;"
            >
              <treeselect
                v-model="form.agentId"
                placeholder="请选择所属机构"
                :options="agencyList"
                :searchable="true"
                style="width: 100%;"
                :normalizer="normalizer"
                no-options-text="暂无数据"
                no-results-text="暂无数据"
                @select="selectAgency"
                @open="opens"
                @close="closes"
              />
              <img
                ref="arrows"
                src="@/assets/pullDown.png"
                style="
                      position: absolute;
                      width: 18px;
                      height: 18px;
                      right: 9px;
                      top: 12px;
                      cursor: pointer;
                      pointer-events: none;
                      transition-duration: 0.3s;
                    "
              />
            </el-form-item>
          </el-col>
          <el-col
            :span="16"
            style="padding-left: 20px;"
          >
            <el-button
              type="warning"
              @click="search"
            >搜索</el-button>
            <el-button
              plain
              style="width: 100px; height: 40px;"
              @click="reset"
            >重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 表格区域 -->
    <el-card
      shadow="never"
      class="table-card"
    >
      <el-table
        :data="driverList"
        stripe
        style="width: 100%"
      >
        <el-table-column
          type="index"
          :index="indexMethod"
          label="序号"
          width="140"
        >
        </el-table-column>
        <el-table-column
          prop="account"
          label="司机账号"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="司机姓名"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="司机电话"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="truck.licensePlate"
          label="关联车辆"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="agency.name"
          label="所属机构"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="workStatus"
          label="工作状态"
          width="120"
        >
          <template
            #default="{row}"
          >
            <span
              class="tableColumn-status"
              :class="row.workStatus? '':'stop-use'"
            >{{ row.workStatus?'上班':'休息' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          width="200"
          header-align="center"
        >
          <template #default="{row}">
            <el-button
              type="text"
              size="small"
              @click="$router.push({
                name:'driver-detail',
                query:{
                  id: row.userId,
                  formUrlName:'司机管理'
                }
              })"
            >查看</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button
              type="text"
              size="small"
              @click="openDialog(row)"
            >配置车辆</el-button>
          </template>
        </el-table-column>
        <div slot="empty">
          <img
            class="icon"
            src="@/assets/empty.png"
            style="width: 200px;margin-top: 40px;"
          />
          <div style="margin: -20px 0 30px;">这里空空如也</div>
        </div>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        class="pagination"
        :current-page="driverParams.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="driverParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-card>
    <!-- 配置车辆弹框 -->
    <CarConfig
      v-if="visible"
      :visible.sync="visible"
      :car-detail="carDetail"
      :truck-list="truckList"
      @updateList="getDriverList"
    />
  </div>
</template>
<script>
import { driverList, driverLicenseDetail } from '@/api/transit'
import { agencyList } from '@/api/institutions'
import { getTruckListInDriver } from '@/api/transit'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import Treeselect from '@riophae/vue-treeselect'
import CarConfig from '@/views/transit/components/car-config.vue'
export default {
  name: 'Courses',
  components: {
    Treeselect,
    CarConfig
  },
  data() {
    return {
      form: {
        account: '',
        name: '',
        phone: '',
        agentId: null
      },
      driverParams: {
        account: '',
        agentId: null,
        name: '',
        page: 1,
        pageSize: 10,
        phone: '',
        workStatus: ''
      },
      total: 0,
      driverList: [], // 司机列表信息
      agencyList: [], // 树状机构信息
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      visible: false, // 配置车辆弹框的状态
      carDetail: {}, // 配置车辆信息
      truckList: [] // 车辆列表
    }
  },
  created() {
    this.getDriverList()
    this.getAgencyList()
    this.getTruckList()
  },
  methods: {
    // 获取司机分页数据
    async getDriverList() {
      const { data } = await driverList(this.driverParams)
      if (data) {
        this.driverList = data.items
        this.total = +data.counts
      }
    },
    // 切换每页显示条数
    handleSizeChange(val) {
      this.driverParams.pageSize = val
      this.driverParams.page = 1
      this.getDriverList()
    },
    // 切换页码
    handleCurrentChange(val) {
      this.driverParams.page = val
      this.getDriverList()
    },
    // 序号
    indexMethod(index) {
      return index + 1 + (this.driverParams.page - 1) * this.driverParams.pageSize
    },
    // 获取树状机构信息
    async getAgencyList() {
      const { data } = await agencyList()
      this.agencyList = JSON.parse(data)
    },
    // 下拉框箭头旋转样式
    opens() {
      this.$refs.arrows.style.transform = 'rotate(-180deg)'
    },
    closes() {
      this.$refs.arrows.style.transform = 'rotate(0deg)'
    },
    // 下拉框选择机构
    selectAgency(val) {
      this.form.agentId = val.id
    },
    // 搜索功能
    search() {
      Object.assign(this.driverParams, this.form)
      this.getDriverList()
    },
    // 重置搜索框
    reset() {
      this.form = {
        account: '',
        name: '',
        phone: '',
        agentId: null
      }
      this.search()
    },
    // 车辆配置弹框
    openDialog(row) {
      this.$confirm(
        `<p>配置车辆需满足以下条件：</p>
        <p>① 司机信息已完善<span style="width:100px;display:inline-block"></span>② 司机已设置排班</p>
        <p>③ 司机绑定车辆未在启用状态</p>
        `
        , '车辆配置', {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          closeOnClickModal: false
        }).then(async() => {
        this.carDetail = row
        // 1.获取司机基本信息和驾驶证信息，判断信息是否完善
        const driverDetail = {
          userId: row.userId,
          name: row.name,
          agency: row.agency.name,
          mobile: row.mobile,
          age: row.age
        } // 司机信息
        for (const key in driverDetail) {
          if (!driverDetail[key]) {
            this.$alert('<p style="text-align:center;">配置失败，请先完善司机信息！</p>', '配置失败', {
              dangerouslyUseHTMLString: true
            })
            return
          }
        }
        const { data } = await driverLicenseDetail(row.userId) // 驾驶证信息
        for (const key in data) {
          if (!data[key]) {
            this.$alert('<p style="text-align:center;">配置失败，请先完善司机驾驶证信息！</p>', '配置失败', {
              dangerouslyUseHTMLString: true
            })
            return
          }
        }
        // 2. 判断司机是否已设置排班
        if (!row.workStatus) {
          this.$alert('<p style="text-align:center;">配置失败，请先设置司机排班！</p>', '配置失败', {
            dangerouslyUseHTMLString: true
          })
          return
        }
        // 当没有关联车辆时，允许配置车辆
        if (!row.truck) {
          this.visible = true
          return
        }
        // 3. 判断车辆是否未在启用状态
        if (!row.truck.workStatus) {
          this.$alert('<p style="text-align:center;">配置失败，请先停用车辆！</p>', '配置失败', {
            dangerouslyUseHTMLString: true
          })
          return
        }
        this.visible = true
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 获取配置车辆下拉数据
    async getTruckList() {
      const { data } = await getTruckListInDriver()
      this.truckList = data
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
// 表单卡片
.el-card{
  margin: 20px;
  .el-form{
  display: flex;
  flex-wrap: wrap;
    /deep/ .el-form-item__label{
      font-weight: normal;
    }
    /deep/ .el-form-item__content{
      margin-left: 40px;
    }
    .el-input,.el-select{
      width: 250px;
    }
  }
}
// 表格卡片
.table-card{
  padding-bottom: 40px;
}

.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 30px;
  text-align: center;
}
// 下拉框
/deep/ .el-select {
  width: 100%;
}

/deep/ .el-card{
  overflow: initial;
}
/deep/ .el-card__body{
  padding-bottom: 0;
}

/deep/ .el-pager li.active{
  color:#E15536;
}
</style>

